﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
	Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Demo</title>
	<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
	<link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
	@* 导出引入文件 *@
	<title>Layui with XLSX</title>
	<!-- 引入Layui的CSS -->
	@* <link rel="stylesheet" href="path/to/layui.css"> *@
	<!-- 引入XLSX库的CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
	<title>Layui 导入按钮示例</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"></script>
</head>
<body>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-form-item">

				@*  <div class="layui-inline">
                    <label class="layui-form-label">权限编码</label>
                    <div class="layui-input-block">
                        <input type="text" id="permissionCoding" placeholder="请输入" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="permissionName" placeholder="请输入" class="layui-input">
                    </div>

                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">权限类型</label>
                    <div class="layui-input-block">
                        <select name="interest" lay-filter="testSelect1" id="permissionTypeId">
                            <option value="0" selected>请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select id="permissionState" lay-filter="testSelect2">
                            <option value="0">请选择</option>
                            <option value="1">有效</option>
                            <option value="2">无效</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
                    </div>
                </div> *@
				<button type="button" class="layui-btn layui-bg-blue">导出</button>
				<button type="button" class="layui-btn layui-btn-normal" id="upload-btn">
					<i class="layui-icon layui-icon-upload"></i> 文件导入
				</button>
				<input type="file" id="fileInput" style="display: none;" />
				<button type="button" class="layui-btn layui-bg-red" lay-on="test-iframe-curl" onclick="AddPermission()">+新增</button>
			</div>
		</div>

		<table class="layui-table">
			<thead>
				<tr>
					<td>序号</td>
					<td>客户编码</td>
					<td>客户名称</td>
					<td>客户类型</td>
					<td>客户地址</td>
					<td>客户电话</td>
					<td>所在城市</td>
					<td>创建时间</td>
					<td>状态</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div id="demo-laypage-all"></div>
	</form>


	<script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
	<script>

		layui.use(['form', 'laydate', 'util'], function () {
			var form = layui.form
			var upload = layui.upload;
			var layer = layui.layer;
			var laypage = layui.laypage;
			var $ = layui.$;
			var util = layui.util;
			var laydate = layui.laydate;
			var table = layui.table;
			$(function () {
				ShowWorkCenter();
			})
					 //导入
		   document.getElementById('upload-btn').addEventListener('click', function () {
			document.getElementById('fileInput').click();
		    });

		document.getElementById('fileInput').addEventListener('change', function (e) {
			var file = e.target.files[0];
			if (file) {
				var formData = new FormData();
				formData.append('file', file);

				$.ajax({
					url: '@ViewBag.RBACWrite' + "/api/Client/importClient", // 确保这部分在服务器端已经正确渲染
					data: formData,
					type: "POST",
					processData: false, // 告诉jQuery不要去处理发送的数据
					contentType: false, // 告诉jQuery不要去设置Content-Type请求头
					beforeSend: function () {
						// 上传前的回调，可以在这里做一些准备工作，比如显示加载动画
						layer.load();
					},
					success: function (res) {
						// 关闭加载动画
						layer.closeAll('loading');
						// 如果上传成功，这里res是后端返回的数据
						if (res.code === 0) {
							layer.msg('文件上传成功！');
							//刷新页面
							location.reload();

							// 这里可以添加其他逻辑，比如刷新页面或显示上传的文件信息
						} else {
							layer.msg('文件上传失败：' + res.msg);
							// 可以添加错误处理逻辑，比如重试上传或显示更详细的错误信息
						}
					},
					error: function () {
						// 关闭加载动画
						layer.closeAll('loading');
						// 请求异常回调
						layer.msg('文件上传出错');
						// 可以添加异常处理逻辑，比如提示用户检查网络连接或文件是否损坏
					}
				});
			}
		});
				  //导出

		document.querySelector(".layui-btn.layui-bg-blue").addEventListener("click", exportTableToExcel);

			//销售订单列表
			function ShowWorkCenter() {
				$.ajax({
					url: '@ViewBag.RBACWrite' + "/api/Client/queryClient",
					data: JSON.stringify({}),
					type: "post",
					dataType: "json",
					contentType: "application/json",
					success: res => {
						console.log(res);
						$("tbody").empty(); // 清空tbody内容
						if (res.data != null) {
							$.each(res.data, function () {
								$("tbody").append(`
										<tr>
										  <td>${this.clientsId}</td>
										  <td>${this.clientsNo}</td>
										  <td>${this.clientsName}</td>
										  <td>${this.clientsType}</td>
										  <td>${this.clientsAdds}</td>
										  <td>${this.clientsTell}</td>
										   <td>${this.clientsCity}</td>
										  <td>${this.clientsSmar}</td>
										  <td><button type="button" class="layui-btn layui-btn-xs" onclick="GetWorkCenter(${this.clientsId})">编辑</button>
										  <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" onclick="DeleteWorkCenter(${this.clientsId})">删除</button>
										 </td>
										 </tr>

										 `);

							});
						}
					}
				});
			}
		});



		function exportTableToExcel() {
			var table = document.querySelector("table.layui-table tbody");
			var ws = XLSX.utils.table_to_sheet(table);
			var wb = XLSX.utils.book_new();
			XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
			XLSX.writeFile(wb, "工作中心列表.xlsx");
		}


		//删除客户
		function DeleteWorkCenter(clientsId) {
		    // 显示确认对话框
		    if (confirm('您确定要删除这个工作中心吗？')) {
		        var data = {
		            clientsId: clientsId
		        };
		        $.ajax({
					url: '@ViewBag.RBACWrite' + "/api/Client/deleteClient",
		            data: JSON.stringify(data),
		            type: "DELETE",
		            dataType: "json",
		            contentType: "application/json",
		            success: res => {
		                if (res.code == 0) {
		                    layer.msg('删除成功');
		                    location.reload();
		                } else {
		                    layer.msg('删除失败');
		                }
		            }
		        });
		    } else {
		        // 用户点击了取消按钮，不执行删除操作
		        layer.msg('已取消删除');
		    }
		}
	</script>


	<script>

		//权限添加
		function AddPermission() {
			location.href = "AddClients"
		}

			//修改
		function GetWorkCenter(clientsId) {
			localStorage.setItem("clientsId", clientsId)
			
			location.href = '/WorkCenter/UpdateWorkCenter';
		}

	</script>
</body>
</html>
